import { ElTag } from 'element-plus';

export const columns = [
  {
    prop: 'title',
    label: '标题',
    width: 200,
  },
  {
    prop: 'id',
    label: 'ID',
    width: 80
  },
  {
    prop: 'type',
    label: '类型',
    width: 80,
    type: 'component',
    component: ElTag,
    attrs:(row:any) => {
      return {
        type: row.type === 1 ? 'primary' : 'info'
      }
    },
    render: (row: any) => {
      return row.type === 1 ? '菜单' : '按钮'
    }
  },
  {
    prop: 'icon',
    label: '图标',
    type: 'icon',
    width: 60
  },
  {
    prop: 'permission_code',
    label: '权限code',
    width: 130
  },
  {
    prop: 'path',
    label: '路径'
  },
  {
    prop: 'component',
    label: '组件'
  },
  {
    prop: 'status',
    label: '状态',
    render: (row: any) => {
      return row.status ? '启用' : '禁用'
    }
  },
  {
    label: '操作',
    slot: 'action',
    fixed: 'right',
    width: 200
  }
]

export const formItems = [
  {
    type: 'tree-select',
    label: '上级菜单',
    prop: 'parent_id',
    span: 24,
    attrs: {
      data: [
        {
          label: '顶级菜单',
          value: 0,
          children: []
        }
      ],
      'check-strictly': true,
    },
    rules: [{ required: true, message: '请输入上级菜单', trigger: 'blur' }]
  },
  {
    type: 'radio-group',
    label: '菜单类型',
    prop: 'type',
    span: 24,
    children: [
      { type: 'radio', label: '菜单', value: 1 },
      { type: 'radio', label: '按钮', value: 2 }
    ],
    rules: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
    disableWhen: (data:any) => {
      // 修改的时候禁用菜单类型
      return data.id
    }
  },
  {
    type: 'input',
    label: '菜单标题',
    prop: 'title',
    span: 12,
    rules: [{ required: true, message: '请输入菜单标题', trigger: 'blur' }]
  },
  {
    type: 'input',
    label: '菜单name',
    prop: 'name',
    span: 12,
    showCondition: (formdata: any) => {
      return formdata.type === 1
    }
  },
  {
    type: 'input',
    label: 'redirect',
    prop: 'redirect',
    span: 24,
    showCondition: (formdata: any) => {
      return formdata.type === 1
    }
  },
  {
    type: 'input',
    label: '菜单路径',
    prop: 'path',
    span: 24,
    showCondition:(formdata: any) =>{
      return formdata.type === 1
    },
    rules: [{ required: true, message: '请输入菜单路径', trigger: 'blur' }]
  },
  {
    type: 'input',
    label: '菜单组件',
    prop: 'component',
    span: 24,
    showCondition:(formdata: any) =>{
      return formdata.type === 1
    },
    rules: [{ required: true, message: '请输入菜单组件', trigger: 'blur' }]
  },
  {
    type: 'input',
    label: '菜单排序',
    prop: 'sort',
    span: 12,
    attrs: {
      type: 'number',
      min: 0,
      max: 9999
    }
  },
  {
    // type: 'input',
    label: '菜单图标',
    prop: 'icon',
    span: 12,
    type: 'icon',
    showCondition:(formdata: any) =>{
      return formdata.type === 1
    }
  },
  {
    type: 'radio-group',
    label: '菜单状态',
    prop: 'status',
    span: 12,
    showCondition:(formdata: any) =>{
      return formdata.type === 1
    },
    children: [
      { type: 'radio', label: '启用', value: 1 },
      { type: 'radio', label: '禁用', value: 0 }
    ],
    rules: [{ required: true, message: '请选择菜单状态', trigger: 'change' }]
  },
  {
    type: 'input',
    label: '权限code',
    prop: 'permission_code',
    span: 12,
    attrs: {
      min: 0,
      max: 150
    },
    rules: [
      {
        required: true,
        message: '请输入有效权限code',
        trigger: 'blur'
      }
    ]
  }
]